<template>
    <div class="password">
        <van-nav-bar title="修改交易密码" left-arrow @click-left="goBack"></van-nav-bar>
        <div class="content">
            <section>
                <van-field v-model="originalPassword" label="交易密码" placeholder="请输入原交易密码" />
                <van-field v-model="newPassword" label="新密码" placeholder="密码由6位数字组成" />
                <van-field v-model="confirmPassword" label="确认新密码" placeholder="请再次输入新密码" />
            </section>
            <div class="login-out">
                <button type="submit" class="submit-btn" @click="modifyPassword">确认</button>
            </div>
        </div>
    </div>
</template>
<script>
import Vue from "vue"
import axios from "axios"
import {
    updatePassword
} from "../../../axios/api.js"
import {
    NavBar,
    Field
} from "vant"
export default {
    components: {
        [NavBar.name]: NavBar,
        [Field.name]: Field,
    },
    data() {
        return {
            token: "",
            originalPassword: "",
            newPassword: "",
            confirmPassword: "",
        }
    },
    methods: {
        //返回上一页
        goBack() {
            this.$router.go(-1);
        },
        //修改交易密码
        modifyPassword() {
            let modifyPassword = new FormData();
            modifyPassword.append("token",this.$store.state.token);
            modifyPassword.append("originalPassword",this.originalPassword);
            modifyPassword.append("newPassword",this.newPassword);
            modifyPassword.append("confirmPassword",this.confirmPassword);
            modifyPassword.append("type","0");
            modifyPassword.append("passwordType","1");
            updatePassword(modifyPassword).then(res => {
                console.log(res)
                if (res.data.code != 200) {
                    this.$toast(res.data.msg);
                }else {
                    this.$toast(res.data.msg);
                    this.$router.push({name: "passwordSetting"});
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import "../../../assets/less/variable.less";
/deep/.van-cell__title {
    text-align: left;
}
/deep/.van-cell::after {
    content: ' ';
    position: absolute;
    pointer-events: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    border-bottom: 1px solid #ebedf0;
}
.password {
    background: #fff;
    .content {
        background: #fff;
        .login-out {
            margin-top: .67rem;
            width: 100%;
            background-color: #fff;
            color: #fff;
            font-size: @base_textSize;
            .submit-btn {
                padding: 10px;
                width: 90%;
                height: 1.07rem;
                border: 0;
                border-radius: 3px;
                background: #ff976a;
                outline: none;
            }
        }
    }
}
</style>